<!-- 点会前 -->
<template>
  <img v-if="isTitle" src="@/assets/xinshuoImages/line.png" alt="" style="width: 100%" />
  <div ref="ConfirmProtectRef" class="box">
    <div class="seq">
      <div class="line1"></div>
      <div class="txt">确认防护</div>
      <div class="line2"></div>
    </div>
    <div class="center">
      <div class="leftBox" style="width: 25%">
        <TitleAndLogo title="正常上道" img-url1="AI.png" style="width: 145px; font-size: 16px; margin-bottom: 10px" />
        <div class="table-container">
          <div class="table-header">
            <table>
              <tbody style="background: #eef5ff">
                <tr
                  v-for="(column, index) in columns"
                  :key="index"
                  :class="index == 1 || index == 2 ? 'heightBig' : 'heightsmall'"
                >
                  <th>{{ column }}</th>
                </tr>
              </tbody>
            </table>
          </div>
          <div class="table-body">
            <table>
              <tbody>
                <tr
                  v-for="row in tableData"
                  :key="row.id"
                  :class="row.id == 1 || row.id == 2 ? 'heightBig' : 'heightsmall'"
                >
                  <td>{{ row.title }}</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
      <div class="centerBox" style="width: 50%">
        <TitleAndLogo
          title="防护员站位核实无误"
          img-url1="AI.png"
          style="width: 226px; font-size: 16px; margin-bottom: 10px"
        />
        <div class="videoBox">
          <video :src="videoUrl" class="video" muted autoplay controls loop></video>
          <div class="fixStatus">
            <div v-for="item in statusArr.status1" :key="item" class="oneStatus">
              <TitleAndstatus :title="item" />
            </div>
          </div>
        </div>
      </div>
      <div class="rightBox" style="width: 25%">
        <TitleAndLogo
          title="室内外防护对接正常"
          img-url1="AI.png"
          style="width: 226px; font-size: 16px; margin-bottom: 10px"
        />
        <el-table
          ref="table"
          class="hd-table"
          :data="tableData1"
          border
          style="width: 100%"
          :header-cell-style="{
            background: '#EEF5FF',
            textAlign: 'center',
            color: '#111',
          }"
        >
          <el-table-column prop="seq" label="序号" />
          <el-table-column prop="speakTime" label="对讲时间" width="213px" />
          <el-table-column prop="receiveStatus" label="录音">
            <template #default>
              <img src="@/assets/xinshuoImages/luyin.png" alt="" />
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script setup>
import { nextTick, reactive, ref } from 'vue'
import urls from '@/utils/url'
let ConfirmProtectRef = ref()
let props = defineProps({
  isTitle: {
    type: Boolean,
    default: true,
  },
  videoUrl: {
    type: String,
    default: '',
  },
})
let statusArr = reactive({
  status1: ['站位正确'],
})
const columns = reactive(['上道口', '开锁命令号获取正常', '上道人员核对', '上道时间'])

const tableData = reactive([
  { id: 0, title: 'XXXXXX上道口' },
  { id: 1, title: 'XXXXXXXXXXX' },
  { id: 2, title: '核对无误' },
  { id: 3, title: '06:50' },
  // 更多数据行...
])
const tableData1 = [
  {
    seq: '1',
    speakTime: '2023-07-24 08:04',
  },
  {
    seq: '2',
    speakTime: '2023-07-24 08:04',
  },
  {
    seq: '3',
    speakTime: '2023-07-24 08:04',
  },
  {
    seq: '4',
    speakTime: '2023-07-24 08:04',
  },
  {
    seq: '5',
    speakTime: '2023-07-24 08:04',
  },
  {
    seq: '6',
    speakTime: '2023-07-24 08:04',
  },
  {
    seq: '7',
    speakTime: '2023-07-24 08:04',
  },
  {
    seq: '8',
    speakTime: '2023-07-24 08:04',
  },
  {
    seq: '9',
    speakTime: '2023-07-24 08:04',
  },
  {
    seq: '9',
    speakTime: '2023-07-24 08:04',
  },
  {
    seq: '10',
    speakTime: '2023-07-24 08:04',
  },
]
const table = ref()
// 设置定时器
let timers
// el-table表格自动滚动
const scrollUp = (tableRef) => {
  const demo = tableRef.$refs.bodyWrapper.getElementsByClassName('el-scrollbar__wrap')[0]
  const tableScroll = ref(true)
  demo.addEventListener('mouseover', () => {
    tableScroll.value = false
  })
  demo.addEventListener('mouseout', () => {
    tableScroll.value = true
    console.log(' tableScroll.value:', tableScroll.value)
  })
  timers = setInterval(() => {
    if (tableScroll.value) {
      // 鼠标移入表格停止滚动
      demo.scrollTop += 1
      if (demo.clientHeight + demo.scrollTop >= demo.scrollHeight) {
        // demo.scrollHeight 整体内容的高度
        demo.scrollTop = 0 //scrollTop控制滚动条的垂直位置。使滚动条回到顶部。
      }
    }
  }, 60)
}

onMounted(() => {
  nextTick(() => {
    scrollUp(table.value)
  })
})

onBeforeUnmount(() => {
  clearInterval(timers) // 销毁定时器
})
defineExpose({
  ConfirmProtectRef,
})
</script>

<style lang="scss" scoped>
@import '@/styles/centerStyle.scss';
.box {
  display: flex;
  margin-top: 20px;
  // height: 600px;
  .seq {
    margin-right: 37px;
    height: 522px;
    margin-left: 15px;
    .txt {
      width: 72px;
      height: 26px;
      font-size: 18px;
      font-family:
        Source Han Sans CN-Bold,
        Source Han Sans CN;
      font-weight: 700;
      color: #111111;
      line-height: 26px;
      margin: 17px 0;
    }
    .line1 {
      margin: auto;
      height: 40%;
      width: 2px;
      background: #1d6be1;
    }
    .line2 {
      margin: auto;
      height: 40%;
      width: 2px;
      background: #1d6be1;
    }
  }
  .center {
    display: flex;
    width: calc(100% - 118px);
    .leftBox {
      width: 50%;
      margin-right: 30px;
    }
    .centerBox {
      margin-right: 40px;
    }
    .rightBox {
      width: 50%;
      :deep(.el-table) {
        font-size: 16px !important;
      }
      .table-container {
        height: 400px;
        overflow-y: auto;
      }
      .hd-table {
        height: 400px;
        text-align: center;
      }
      :deep(.el-table--enable-row-transition .el-table__body td.el-table__cell) {
        text-align: center;
        height: 40px !important;
        padding: 0;
      }
    }
    .videoBox {
      width: 100%;
      position: relative;
      height: 404px;

      .video {
        object-fit: cover;
        width: 100%;
        height: 404px;
      }
    }
    .fixStatus {
      display: flex;
      align-items: center;
      position: absolute;
      top: 6px;
      right: 6px;
      .oneStatus {
        margin-right: 16px;
        &:last-child {
          margin-right: 0;
        }
      }
    }
  }
}
// 表格垂直
.table-container {
  display: flex;
}
.table-header {
  width: 82px;
  /* height: 50px; */
  background: #eef5ff;
  border-radius: 0px 0px 0px 0px;
  opacity: 1;
}

.table-body {
  width: calc(100% - 82px);
}

.table-header table,
.table-body table {
  width: 100%;
  border-collapse: collapse;
}

.table-header th,
.table-body td {
  padding: 8px;
  border: 1px solid #1d6be1;
}
.table-header th {
  border-right: none;
}
.heightBig {
  height: 153px;
}
.heightsmall {
  height: 50px;
}
</style>
